<template>
  <Page title="请假" :on-page-back="onPageBack">
    <template #navBarCustom>
      <div class="nav-bar-btns flex">
        <div class="item flex items-center" @click="create">
          <span class="name text-white">发起申请</span>
        </div>
      </div>
    </template>
    <template #content>
      <div class="w-full h-full px-20px box-border flex flex-col">
        <!-- 筛选 -->
        <div class="tabs-wrap w-full h-full py-16px">
          <div class="tabs w-full h-full bg-white p-4px box-border" style="font-size: 0">
            <div
              class="item h-full text-768895 font-semibold inline-block relative"
              :class="tabs.active === tab.value ? 'bg-51C3FF text-white' : ''"
              v-for="(tab, index) in tabs.list"
              :key="index"
              @click="tabs.change(tab.value)"
            >
              <span class="name absolute">{{ tab.label }}</span>
            </div>
          </div>
        </div>
        <!-- 请假列表 -->
        <scroll-view
          ref="scroll"
          class="flex-1 overflow-scroll"
          :refresher-enabled="true"
          :refresher-loader-offset-y="-16"
          @scrolltolower="leaves.getList()"
          @refresh="leaves.refresh($event)"
        >
          <leave-list
            :list="leaves.list"
            @show-ticket="leaves.showTicket($event)"
            @show-reason="leaves.showReason($event)"
          />
          <load-more
            cssStyle="padding-top:0.14rem"
            :loading="leaves.loading"
            :has-more="leaves.hasMore"
            @click="leaves.getList()"
          />
        </scroll-view>
      </div>
    </template>
  </Page>
</template>

<script>
import Page from '@/components/page'
import ScrollView from '@/components/scroll-view'
import LeaveList from './components/leave-list'
import LoadMore from '@/components/load-more'
import { getAskForLeaveListApi } from '@/api/ask-for-leave'
import { MODULE_ID } from '@/store/modules/module-use'

export default {
  components: {
    Page,
    ScrollView,
    LeaveList,
    LoadMore
  },
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.params.completed) {
        vm.leaves.reset()
        vm.leaves.getList()
      }
    })
  },
  data() {
    return {
      loading: null,
      tabs: {
        vm: this._self,
        active: 1,
        list: [
          {
            label: '审批中',
            value: 1
          },
          {
            label: '已通过',
            value: 2
          },
          {
            label: '未通过',
            value: 3
          }
        ],
        change: function (value) {
          this.active = value
          this.vm.leaves.reset()
          this.vm.leaves.getList()
        }
      },
      leaves: {
        vm: this._self,
        pageNo: 1,
        pageSize: 12,
        loading: true,
        hasMore: true,
        list: [],
        getList: async function () {
          if (this.loading) return

          this.loading = true
          const leaves = this.list

          let params = {
            pageNo: this.pageNo,
            pageSize: this.pageSize,
            status: this.vm.tabs.active
          }

          const {
            data: { list }
          } = await getAskForLeaveListApi(params)

          if (list.length < this.pageSize) {
            this.hasMore = false
          }

          if (list.length > 0) {
            leaves.push(
              ...list.map((item) => {
                item['unread'] = 0
                return item
              })
            )
            this.pageNo++
          }

          this.loading = false
        },
        refresh: async function (done = () => {}) {
          const params = {
            pageNo: (this.pageNo = 1),
            pageSize: this.pageSize,
            status: this.vm.tabs.active
          }

          const {
            data: { list }
          } = await getAskForLeaveListApi(params)

          this.list.length = 0
          this.list.push(
            ...list.map((item) => {
              item['unread'] = 0
              return item
            })
          )
          this.pageNo++

          done()
        },
        reset: function () {
          this.pageNo = 1
          this.pageSize = 12
          this.loading = false
          this.hasMore = true
          this.list = []
        },
        showTicket: function (e) {
          this.vm.$router.push(`/pages/ask-for-leave/ticket?id=${e.id}`)
        },
        showReason: function (e) {
          const { opinion } = e
          this.vm.$popup.show({
            type: 'alert',
            success: (popup) => {
              popup.$on('confirm', () => {
                this.vm.$popup.hide('alert')
              })
              popup.setData({
                title: '驳回原因',
                content: opinion
              })
            }
          })
        }
      }
    }
  },
  computed: {},
  mounted() {
    // 初始化模块使用记录
    this.$store.commit('setCurrentModuleUse', {
      vm: this._self,
      type: MODULE_ID.ASK_FOR_LEAVE,
      subjectId: ''
    })

    this.leaves.loading = false
    this.leaves.getList()
  },
  methods: {
    create() {
      this.$router.push('/pages/ask-for-leave/create')
    },
    onPageBack() {
      this.$router.back()
    }
  }
}
</script>

<style lang="scss" scoped>
.nav-bar-btns {
  .item {
    height: 30px;
    .icon {
      width: 22px;
      height: 22px;
    }

    .name {
      font-size: 22px;
      line-height: 22px;
    }
  }
}

.tabs-wrap {
  height: 54px;

  .tabs {
    border-radius: 35px;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

    .item {
      width: 200px;
      font-size: 20px;
      border-radius: 35px;

      .name {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
</style>
